<div class="subheader" ng-if="model.app">
  <div class="fixed-container">
    <div class="btn-group pull-right">
      <button type="button" class="btn btn-default" ng-click="useAsNewVersion()" ng-if="!model.app.latestVersion">
        {{ 'APP.ACTION.USE-AS-NEW-VERSION' | translate }}
      </button>
      <a
        href="{{ model.appExportUrl }}"
        class="btn btn-default"
        title="{{ 'APP.ACTION.EXPORT-ZIP' | translate }}"
        ng-if="model.app.latestVersion"
      >
        <i class="glyphicon glyphicon-save"></i>
      </a>
      <a
        href="{{ model.appBarExportUrl }}"
        class="btn btn-default"
        title="{{ 'APP.ACTION.EXPORT-BAR' | translate }}"
        ng-if="model.app.latestVersion"
      >
        <i class="glyphicon glyphicon-export"></i>
      </a>
      <button
        type="button"
        class="btn btn-default"
        ng-click="importAppDefinition()"
        ng-if="model.app.latestVersion"
        translate
      >
        APPS-LIST.ACTION.IMPORT
      </button>
      <button type="button" class="btn btn-default" ng-click="publish()" ng-if="model.app.latestVersion">
        {{ 'APP.ACTION.PUBLISH' | translate }}
      </button>
      <button type="button" class="btn btn-default" ng-click="openEditor()" ng-if="model.app.latestVersion">
        <i class="glyphicon glyphicon-edit icon-and-label"></i> {{ 'APP.ACTION.OPEN-IN-EDITOR' | translate }}
      </button>
    </div>
    <div class="btn-group pull-right">
      <button
        type="button"
        class="btn btn-default"
        ng-click="editApp()"
        ng-disabled="!model.app.latestVersion"
        title="{{ 'APP.ACTION.EDIT' | translate }}"
      >
        <i class="glyphicon glyphicon-pencil"></i>
      </button>
      <button
        type="button"
        class="btn btn-default"
        ng-click="duplicateApp()"
        ng-disabled="!model.app.latestVersion"
        title="{{ 'APP.ACTION.DUPLICATE' | translate }}"
      >
        <i class="editor-icon editor-icon-copy"></i>
      </button>
      <button
        type="button"
        class="btn btn-default"
        ng-click="deleteApp()"
        title="{{ 'APP.ACTION.DELETE' | translate }}"
        ng-disabled="!model.app.latestVersion"
      >
        <i class="glyphicon glyphicon-trash"></i>
      </button>
    </div>
    <div class="pull-right">
      <a ng-click="returnToList()" class="action">&larr; {{ 'GENERAL.ACTION.RETURN-TO-LIST' | translate }}</a>
    </div>
    <h2>
      <span class="version">v{{ model.app.version }}</span
      >{{ model.app.name }}
    </h2>
    <div class="clearfix">
      <div class="col-xs-4 details">
        <span><i class="glyphicon glyphicon-user"></i>{{ 'APP.DETAILS.CREATED-BY' | translate: model.app }}</span>
        <span
          ><i class="glyphicon glyphicon-pencil"></i>{{ 'APP.DETAILS.LAST-UPDATED-BY' | translate: model.app }}</span
        >
      </div>
      <div class="col-xs-8 details clearfix">
        <div class="related btn-group">
          <button
            id="toggle-history"
            type="button"
            class="btn btn-subtle"
            ng-click="toggleHistory($event)"
            title="{{ 'APP.ACTION.EDIT' | translate }}"
          >
            {{ 'APP.DETAILS.HISTORY-TITLE' | translate }}
            <span class="counter" ng-show="model.versions.data.length">{{ model.versions.data.length }}</span>
          </button>
        </div>
        <p ng-if="model.app.description">
          {{ model.app.description }}
        </p>
        <p ng-if="!model.app.description && model.app.latestVersion" class="hint">
          <a ng-click="editApp()" class="subtle-select">
            {{ 'APP.DETAILS.NO-DESCRIPTION' | translate }} <i class="glyphicon glyphicon-pencil"></i>
          </a>
        </p>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid content" ng-if="model.app" auto-height offset="40">
  <h2>{{ 'APP.DETAILS.TITLE' | translate: model.app }}</h2>
  <div class="content-canvas-wrapper">
    <div class="content-canvas">
      <div
        class="row"
        ng-if="model.appDefinition.definition.models && (model.appDefinition.definition.models.length > 0 || model.appDefinition.definition.cmmnModels.length > 0)"
      >
        <div class="col-xs-4">
          <div class="preview-wrapper active">
            <h3>{{ 'APP.TITLE.PREVIEW' | translate }}</h3>
            <div class="app preview {{ model.appDefinition.definition.theme }}">
              <div class="app-content">
                <h3>{{ model.app.name }}</h3>
                <p>{{ model.app.description }}</p>
              </div>
              <div class="backdrop">
                <i ng-show="!model.appDefinition.definition.icon" class="icon icon-choice"></i>
                <i
                  ng-show="model.appDefinition.definition.icon"
                  class="glyphicon {{ model.appDefinition.definition.icon }}"
                ></i>
              </div>
              <div class="logo">
                <i ng-show="!model.appDefinition.definition.icon" class="icon icon-choice"></i>
                <i
                  ng-show="model.appDefinition.definition.icon"
                  class="glyphicon {{ model.appDefinition.definition.icon }}"
                ></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-xs-12">
          <h3>{{ 'APP.DETAILS.MODELS-TITLE' | translate }}</h3>
          <div
            class="no-results"
            ng-show="!model.appDefinition.definition.models.length && !model.appDefinition.definition.cmmnModels.length"
          >
            {{ 'APP.DETAILS.NO-MODELS-SELECTED' | translate }}
          </div>
        </div>
      </div>

      <br />

      <div class="row">
        <div class="tabs-wrapper">
          <div tab-control="tabs" active-tab="model.activeTab"></div>

          <div class="col-xs-12 item-wrapper" ng-show="model.activeTab == 'bpmn'">
            <div class="item fadein" ng-repeat="model in model.appDefinition.definition.models">
              <div class="item-box" ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(model.id) + '\')'}">
                <div class="actions">
                  <span class="badge">v{{ model.version }}</span>
                </div>
                <div class="details">
                  <h3 class="truncate" title="{{ model.name }}">
                    {{ model.name }}
                  </h3>
                  <p>{{ model.description }}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="col-xs-12 item-wrapper" ng-show="model.activeTab == 'cmmn'">
            <div class="item fadein" ng-repeat="model in model.appDefinition.definition.cmmnModels">
              <div class="item-box" ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(model.id) + '\')'}">
                <div class="actions">
                  <span class="badge">v{{ model.version }}</span>
                </div>
                <div class="details">
                  <h3 class="truncate" title="{{ model.name }}">
                    {{ model.name }}
                  </h3>
                  <p>{{ model.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
